<template>
  <div class="w-720 page-author-rank">
    <div
      v-if="skeletonLoading"
      style="padding: 10px 20px 20px; background: #fff"
    >
      <a-skeleton :paragraph="{ rows: 4 }" active />
    </div>
    <div v-else class="author-content">
      <div v-if="!authorList.length" style="padding: 30px 0">
        <a-empty
          description="暂无数据"
          :image="require('~/assets/images/nodata.png')"
        />
      </div>
      <div v-else>
        <div
          v-for="item in authorList"
          :key="item.id"
          class="author-modal"
          @click="openUserInfoRouter(item.id)"
        >
          <div class="left">
            <HeadAvatar
              :width="50"
              :height="50"
              :img="item.avatar || 'https://image.zdxblog.cn/picture/16849805191921684980519192.png'"
            />
          </div>
          <div class="center">
            <p class="name">
              {{ item.nickname }}
              <Level :level="calcLevelFromExp(item.exp)" />
            </p>
            <p class="job">{{ item.job || '--' }}</p>
            <p class="desc">
              获得 {{ item.got_agree_counts }} 赞 ·
              {{ item.got_view_counts || 0 }} 阅读
            </p>
          </div>
          <div v-if="sessionInfo.id !== item.id" class="right">
            <a-button
              v-if="!item.hasFocused"
              type="dashed"
              icon="user-add"
              @click.stop="updateUserFocus(true, item)"
              >关注</a-button
            >
            <a-button
              v-else
              type="dashed"
              icon="check"
              @click.stop="updateUserFocus(false, item)"
              >已关注</a-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { calcLevelFromExp } from '~/util'

export default {
  name: 'AuthorRank',
  layout: 'BaseLayout',
  data () {
    return {
      authorList: [],
      skeletonLoading: true,
      pagination: {
        pageNo: 1,
        pageSize: 50
      },
      calcLevelFromExp
    }
  },

  created () {
    this.findAuthorRankList()
  },

  methods: {
    /**
     * 查询用户排行列表信息
     */
    async findAuthorRankList () {
      try {
        const { pageNo, pageSize } = this.pagination
        const { data } = await this.$axios.get(
          `/gimishare/api/v1/statistics/userrank?pageNo=${pageNo}&pageSize=${pageSize}`
        )
        this.authorList = data
      } catch (error) {
        console.log(error)
      } finally {
        this.skeletonLoading = false
      }
    },

    /**
     * user focus user
     * @param { Boolean } state true - focus  false - unfocus
     * @param { Object } userItem target userinfo
     */
    async updateUserFocus (state, userItem) {
      if (!this.sessionInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      try {
        const API = state ? '/users/focususer' : '/users/unfocususer'
        const focusId = userItem.id
        await this.$axios.get(`/gimishare/api/v1${API}?focusId=${focusId}`)
        userItem.hasFocused = !userItem.hasFocused
      } catch (error) {
        console.log(error)
      }
    },

    openUserInfoRouter (userId) {
      const ROUTERURL = this.$router.resolve({
        path: `/user/${userId}`
      })
      window.open(ROUTERURL.href, '_blank')
    }
  },

  computed: {
    ...mapState({
      sessionInfo: (state) => state.userInfo
    })
  }
}
</script>

<style scoped lang="less">
.page-author-rank {
  padding-top: 12px;
  .author-content {
    background: #fff;
  }
  .author-modal {
    border-bottom: 1px solid #f1f1f1;
    padding: 20px;
    display: flex;
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    &:hover {
      background: rgb(252, 252, 252);
    }
    .center {
      padding: 0 20px;
      flex: 1;
      p {
        &.name {
          color: #000;
          display: flex;
          align-items: center;
        }
        &.job {
          color: #999;
          font-size: 12px;
          margin-bottom: 10px;
        }
        &.desc {
          font-size: 12px;
          color: #777d81;
        }
      }
    }
  }
}
</style>
